<template>
    <div class="bg">
    <Head></Head>


        <div class="home">

          <div class="home_1">
              <div class="lt1">{{$t('m.rousev')}}</div>
          </div>
<!--            <div class="home_1">
                &lt;!&ndash; <span class="ht1">Rouse首个创新性</span> &ndash;&gt;

                <div class="home_2">
                    &lt;!&ndash; 查询的图标                  &ndash;&gt;
                    <img class="l" src="@/assets/l1.png"/>
                    <div class="lt">
                          &lt;!&ndash;  查询图标下的 文字              &ndash;&gt;
                        <div class="lt1">{{$t('m.rousev')}}</div>
                    </div>
                </div>
            </div>-->
            <div class="account">
<!--                <div class="account1">
                    <div class="account_1">
                        <div>{{$t('m.invest')}}</div>
                        <div><span  class="num">{{invest}}</span> BNB</div>
                    </div>

                </div>

                <div class="account1">
                    <div class="account_1">
                        <div>{{$t('m.profit')}}</div>
                        <div><span  class="num">{{profit}}</span> BNB</div>
                    </div>
                </div>-->
              <div class="container">
                <p class="title">{{$t('m.invest')}}</p >
                <p class="value">3436.67</p >
                <p class="bnb">BNB</p>
              </div>

              <div class="container">
                <p class="title">{{$t('m.profit')}}</p >
                <p class="value">3436.67</p >
                <p class="bnb">BNB</p>
              </div>

            </div>


        </div>





        <FootB></FootB>
    </div>
</template>

<script>

    import FootB from "components/content/footer/Foot.vue";
    import Head from '@/components/head.vue'
    // @ is an alias to /src
    import Web3 from 'web3'
    import rouseAbi from '@/abi_rouse'
    import detectEthereumProvider from "@metamask/detect-provider";
    export default {
        name: 'wudaoFaq',
        components:{
            FootB,
            Head
        },
        data() {
            return {
                invest:0,
                profit:0,
                cha:'Rouse1.0  查询',
                value:0
            };
        },

        created() {

            this.getInvite()

        },
        methods: {
            onClickRight() {

                this.$router.push('/')
            },

            async getInvite() {
                try{
                    const provider = detectEthereumProvider();

                    let web3;
                    if (provider) {
                        console.log('Ethereum successfully detected!')
                        web3=new Web3(window.ethereum) ;
                    } else {
                        // if the provider is not detected, detectEthereumProvider resolves to null
                        console.error('Please install MetaMask!')
                    }


                    var contractId = this.$store.state.rouse_contract_1;
                    var tokenContract = new web3.eth.Contract(rouseAbi, contractId);

                    let invest =await tokenContract.methods.userInvestBNBAmount(this.$store.state.address).call();
                    this.invest=web3.utils.fromWei(invest, 'ether')

                    let profit =await tokenContract.methods.userClaimRewardBNBValue(this.$store.state.address).call();

                    let tprofile= parseFloat(web3.utils.fromWei(profit, 'ether'))

                    if(tprofile > 0){
                        this.profit=tprofile.toFixed(5);
                    }else{
                        this.profit=tprofile.toFixed(2);
                    }

                    //  this.profit=parseFloat(web3.utils.fromWei(profit, 'ether')).toFixed(5)
                }catch(e){
                    console.log(e.message)
                }

            },

        }

    }
</script>

<style scoped>

    .account{
        padding: 0 1px;
        display: flex;
        justify-content: space-between;

    }


    @keyframes animated-border {
        0% {
            box-shadow: 0 0 0 0 rgba(255,255,255,0.4);
        }
        100% {
            box-shadow: 0 0 0 20px rgba(131, 184, 17, 0);
        }
    }


    .home_1{
        display: flex;
        padding: 0;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        margin-top: 30px
    }


    .home {
        padding: 50px 0px;
        max-width: 550px;
        margin: auto;
        color: #ebe6e6;
        background-color: #000;
        font-size: 14px;
        //line-height: 20px;
        height: auto;
        min-height: calc(100vh - 275px);
        /*  padding-bottom: 100px;*/
        margin-top: -58px;

    }



    .lt1{
      width: 366px;
      height: 32px;
      left: calc(50% - 366px/2);
      top: 60px;

      font-family: 'Dream Han Sans SC';
      font-style: normal;
      font-weight: 693;
      font-size: 25px;
      line-height: 32px;
      /* identical to box height, or 128% */
      text-align: center;
      letter-spacing: -0.02em;

      background: linear-gradient(180deg, #D57123 0%, #F4BF43 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
    }


    .container {
      //box-sizing: border-box;
      background: radial-gradient(69.9% 110.16% at 17.58% 4.3%, rgba(251, 132, 23, 0.25) 0%, rgba(52, 25, 0, 0.1) 78.06%);
      border-radius: 20px;
      width: 174px;
      height: 143px;
      border: 1px solid rgba(251, 132, 23, .2);
      /* margin-left: 25px;
          margin-top: 15px; */
       //background: linear-gradient(175%,rgba(#fff,100%),rgba(#FFF,0%));
      margin-top: 25px;

    }


    /* 引入的翻译的文字*/

    .title {
      text-align: center;
      font-size: 18px;
      margin-bottom: 40px;
    }


    /* 3436.67 */
    .value {
      color: #FB8417;
      text-align: center;
      font-size: 28px;
      margin-top: -20px;
    }

    .bnb{
       text-align: center;
        margin-top: -25px;
        font-size: 18px;
         color: rgba(255,255,255,0.4)
        }



</style>
